<script setup lang="ts">
import { SizeUtil } from '@xtail/ui'
import { GradientDynamicBorderPropsType } from './types'

defineOptions({
  name: 'SGradientDynamicBorder'
})

withDefaults(defineProps<GradientDynamicBorderPropsType>(), {
  bgColor: '#fff',
  customBorderColor: false,
  borderColor: 'linear-gradient(135deg, #43CBFF 15%, #9708CC 100%)',
  borderColorList: ['transparent 180deg', 'skyblue 360deg'] as any,
  borderWidth: '2px',
  borderRadius: '0.25rem',
  rotate: true,
  speed: '5s',
  shine: false,
  shineRange: '10px',
  shineBrightness: 0.8,
  hover: false,
  hoverPause: false
})
</script>

<template>
  <div
    class="s-gradient-dynamic-border"
    :class="[
      !hover && rotate ? 's-gradient-dynamic-border--rotate' : '',
      hover && rotate ? 's-gradient-dynamic-border--rotate--hover' : '',
      !hover && shine ? 's-gradient-dynamic-border--shine' : '',
      hover && shine ? 's-gradient-dynamic-border--shine--hover' : '',
      !hover && hoverPause ? 's-gradient-dynamic-border--hover-pause' : '',
      hover
        ? customBorderColor
          ? 's-gradient-dynamic-border--border-color-custom--hover'
          : 's-gradient-dynamic-border--border-color-default--hover'
        : customBorderColor
          ? 's-gradient-dynamic-border--border-color-custom'
          : 's-gradient-dynamic-border--border-color-default'
    ]"
    :style="{
      '--border-color': borderColor,
      '--border-color-list': borderColorList.join(', '),
      '--border-width': SizeUtil.unitPreHandler(borderWidth),
      '--border-radius': SizeUtil.unitPreHandler(borderRadius),
      '--speed': SizeUtil.unitPreHandler(speed, 'ms'),
      '--shine-range': SizeUtil.unitPreHandler(shineRange),
      '--shine-brightness': shineBrightness
    }"
  >
    <div class="s-gradient-dynamic-border__content" :style="{ backgroundColor: bgColor }">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss">
@use './style' as *;
</style>
